import { convertImgUrl } from "@/utils/MyFun";
import { formateDate } from "@/utils/common";
import { Icon } from "@iconify/react";
import { Link } from "react-router-dom";

import styled from "styled-components";

const Styled = styled.div`
  margin-top: 15px;
  header {
    display: flex;
    align-items: center;
    font-size: 6rem;
    margin-bottom: 15px;
    span {
      margin-left: 10px;
    }
  }
  ul {
    height: 200px;
    overflow-y: scroll;
  }
  .container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    margin-right: 15px;
  }
`;

const LatestList = ({ articleList = [] }) => {
  return (
    <Styled>
      <header>
        <Icon icon="mdi:clock" />
        <span>最新文章</span>
      </header>
      {/* 目录列表 */}
      <ul>
        {articleList.map((item, index) => {
          return (
            <Link key={index} to={`/article/${item.id}`}>
              <div className="container">
                <img src={convertImgUrl(item.img)} alt="图片" />
                <div className="info">
                  <p>{item.title}</p>
                  <p>{formateDate(item.created_at)}</p>
                </div>
              </div>
            </Link>
          );
        })}
      </ul>
    </Styled>
  );
};

export default LatestList;
